const {resolve} = require('path');
//解决html中img直接引用图片问题
const htmlWebpackPlugin = require('html-webpack-plugin');
// 将css、less转换的css抽离成单独的css文件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
//对css进行压缩
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//设置nodejs的环境变量
process.env.NODE_ENV = 'development'
module.exports = {
    //入口文件
    entry: './src/js/index.js',
    //输出配置
    output: {
        //输出文件名
        filename: 'js/build.js',
        //输出路径，__dirname nodejs的变量，表示当前文件的目录的绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理,执行顺序为从下到上，从右往左
                //引入多个loader
                use: [
                    //创建style标签，将js中的样式资源插入进去，添加到head中生效
                    // 'style-loader',
                    // 这个loader取代style-loader，并将js中的css提取成单独的文件
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }

                    },
                    //将css文件变成commonjs模块加载到js中
                    'css-loader',
                    /**
                     * css兼容型处理：postcss-loader postcss-preset-env
                     * postcss-preset-env 作用：找到package.json中browserslist里面的配置，通过配置加载指定css兼容性样式
                     * 使用默认配置 'postcss-loader'，使用自定义配置如下
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-preset-env')()
                            ]
                        }
                    }

                ]
            },
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }

                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-preset-env')()
                            ]
                        }
                    },
                    //将less文件编译成css文件
                    'less-loader'

                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                //引入单个loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8KB，就会被base64处理
                    limit: 8 * 1024,
                    //关闭url-loader 的es6模块化，使用commonjs解析
                    // esModule: false,
                    //对默认的图片名称重命名，取原hash值得前10位+原扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'img'
                }
            },
            {
                test: /\.html$/,
                //处理html文件中的img图片
                loader: 'html-loader'
            },
            {
                //排除对应的资源，其他资源都需要经过该loader处理
                exclude: /\.(css|less|js|html|jpg|png|gif|json)$/,
                //处理html文件中的img图片
                loader: 'file-loader',
                options: {
                    outputPath: 'other'
                }
            },
            {
                test: /\.js$/,
                //
                /**
                 * js语法检查
                 * 检查规则读取package.json中的eslintConfig中的设置
                 */
                loader: 'eslint-loader',
                exclude: /node_modules/,
                //js优先执行该loader
                enforce: 'pre',
                options: {
                    //自动修复eslint错误
                    fix: true
                }
            },
            {
                test: /\.js$/,
                // js兼容处理
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    //自动修复eslint错误
                    presets: [[
                        '@babel/preset-env',
                        {
                            //按需加载
                            useBuiltIns: 'usage',
                            corejs: {
                                version: 3
                            },
                            //指定具体浏览器的兼容性
                            targets: {
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                                safari: '10',
                                edge: '17'
                            }
                        }
                    ]]
                }
            }
        ]
    },
    // loader的配置
    plugins: [
        // 默认创建一个空的html，自动引入打包输出的所有资源，
        // 如果需要指定的html 加入 template配置项
        new htmlWebpackPlugin({
            template: './src/index.html',
            //压缩html
            minify: {
                //移出空格
                collapseWhitespace: true,
                //移出注释
                removeComments: true
            }
        }),
        new miniCssExtractPlugin({
            filename: 'css/build.css'
        }),
        new optimizeCssAssetsWebpackPlugin()
    ],
    //模式
    mode: 'development',
    //自动化编译、打开浏览器、刷新浏览器；
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer的指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        //启用gzip压缩
        compress: true,
        //自动打开浏览器
        open: true,
        port: 8000,
        // 热加载
        hot: true
    },
    //开发环境 eval-source-map
    //开发环境 nosources-source-map
    devtool: 'eval-source-map'

}
